/*
 * @Description: 保证金管理页面
 * @Version: 1.0
 * @Autor: c-jack.qian
 * @Date: 2020-10-21 17:30:52
 * @LastEditors: c-jack.qian
 * @LastEditTime: 2021-04-25 16:54:37
 */
import React, { useMemo, useRef } from 'react';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import {
  Button,
  DataSet,
  notification,
  Select,
  Table,
  TextField,
} from 'choerodon-ui/pro';
import { ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
import { useDataSet } from 'hzero-front/lib/utils/hooks';
import { DataSetProps } from 'choerodon-ui/pro/lib/data-set/DataSet';
import { routerRedux } from 'dva/router';
import querystring from 'querystring';
import { connect } from 'dva';
import ExcelExport from 'components/ExcelExport';
import { TableColumnTooltip } from 'choerodon-ui/pro/lib/table/enum';
import intl from 'utils/intl';

import { marginManagementDS } from '../../stores/marginManagementDS';
import { renderSort, useQueryParams, addEnterCallBack } from '../../utils/utilsFun';
import commonConfigStore from '@common/config/commonConfig';
import CustomizeTableSearch from '@common/components/CustomizeTableSearch';
import formatterCollections from 'utils/intl/formatterCollections';

const O2_OM = process.env.NODE_ENV === 'development' ? '/o2om-c' : commonConfigStore.O2_OM;

notification.config({
  duration: 3,
  placement: 'bottomRight',
});
interface propstype {
  dispatch: any;
}

const ClassPage: React.FC<propstype> = ({ dispatch }) => {
  const tableDS = useDataSet(() => new DataSet(marginManagementDS() as DataSetProps));

  const queryObj = useQueryParams(tableDS);

  const pageRef = useRef(null);

  // 添加按回车查询事件
  addEnterCallBack(tableDS, pageRef);

  // 删除选择行
  const handleDelete = () => {
    const seletedRecord = tableDS.selected;
    if (seletedRecord.length === 0) {
      notification.warning({
        placement: 'bottomRight',
        message: intl.get(`dji.otc.om.view.reminder.warning`).d('提示'),
        description: intl.get(`dji.otc.om.view.reminder.selectDeleteData`).d('请勾选删除的数据'),
      });
      return;
    }
    tableDS.delete(seletedRecord);
  };

  const Columns = useMemo<any>(
    () => [
      {
        header: intl.get(`dji.otc.om.view.field.serialNumber`).d('序号'),
        width: 50,
        lock: true,
        renderer: ({ record }) => renderSort(record, tableDS),
      },
      { name: 'businessGroupMeaning', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'regionName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'areaName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'productCode', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'productName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'depositPrice', align: 'left', tooltip: TableColumnTooltip.always },
    ],
    []
  );

  const handleBatchExport = () => {
    dispatch(
      routerRedux.push({
        pathname: `/o2om/distribution/excel-import/O2OM_C.PRODUCT_DEPOSIT`,
        search: querystring.stringify({
          action: intl.get(`dji.otc.om.view.title.marginManagementImport`).d('保证金管理列表导入'),
          prefixPath: 'O2OM_C.PRODUCT_DEPOSIT',
        }),
      })
    );
  };

  return (
    <PageHeaderWrapper
      title={intl.get('dji.otc.om.view.menu.marginManagement').d('保证金管理')}
      header={
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Button icon="get_app" key="import" onClick={() => handleBatchExport()}>
            {intl.get(`dji.otc.om.view.button.import`).d('导入')}
          </Button>
          <ExcelExport
            defaultSelectAll
            queryParams={queryObj}
            requestUrl={`${O2_OM}/v1/product-deposits/export`}
            defaultConfig={{
              fileName: intl
                .get('dji.otc.cle.view.field.marginManagementExport')
                .d('保证金管理列表导出结果'), // 文件名
              fillerType: 'single-sheet', // 导出类型
            }}
            otherButtonProps={{
              style: { margin: '0 10px' },
            }}
          />
          <Button onClick={() => handleDelete()} color={ButtonColor.primary}>
            {intl.get(`dji.otc.om.view.button.delete`).d('删除')}
          </Button>
        </div>
      }
    >
      <div ref={pageRef}>
        <Table
          dataSet={tableDS}
          border
          queryFieldsLimit={3}
          columns={Columns}
          queryBar={props => (
            <CustomizeTableSearch
              elements={[
                <Select name="businessGroupCode" key="businessGroupCode" searchable />,
                <Select name="areaId" key="areaId" searchable />,
                <TextField name="productName" key="productName" />,
              ]}
              // eslint-disable-next-line react/jsx-props-no-spreading
              {...props}
            />
          )}
        />
      </div>
    </PageHeaderWrapper>
  );
};
export default connect()(
  formatterCollections({
    code: 'dji.otc.om',
  })(ClassPage)
);
